<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>首页</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.2.0.css" />
    <link rel="stylesheet" type="text/css" href="../css/swiper.min.css" />

    <style type="text/css">
        .aui-list .aui-list-item-media {
            width: 6rem;
        }
        .aui-list:before{
            background: #fff;
        }
        /**banner start**/
        #slider {
            width: 100%;
            height:143px;
            overflow: hidden;
            position:relative;
        }
        #slider .swiper-slide {
            position:relative;
            text-align:center;
        }
        #slider img {
            max-width: 100%;
        }
        #slider .swiper-pagination {
            position: absolute;
            z-index: 20;
            bottom: 10px;
            width: 100px;
            text-align: center;
            left:40%;
        }
        #slider .swiper-pagination-bullet {
            display: inline-block;
            width: 5px;
            height: 5px;
            border-radius:5px;
            background: #fff;
            margin: 0 2px;
            opacity: 0.8;
            cursor: pointer;
        }
        #slider .swiper-pagination-bullet-active {
            background: #ff6600;
        }
        /**banner end**/
    </style>
</head>
<body>
<body>
<div class="aui-content" id="app">
    <div id='slider' class='swipe'>
        <div class='swiper-wrapper'>
            <div class="swiper-slide" v-for="(vo,index) in slider_list">
                <img :src="vo.pic_url"/>
            </div>
        </div>
        <div class="swiper-pagination"></div>
    </div>
    <ul class="aui-list aui-media-list aui-margin-t-5">
        <li class="aui-list-item" v-for="(vo,index) in list">
            <div class="aui-media-list-item-inner" @click="open_content(index)">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-text">

                        <div class="aui-list-item-title aui-font-size-14">
                            {{vo.title}}
                        </div>
                    </div>
                    <div class="aui-info aui-padded-b-0">
                        <div class="aui-info-item aui-font-size-12">
                            <img src="../image/001.jpg" style="width:1rem" class="aui-img-round" />
                            <span class="aui-margin-l-5">孟老师</span>
                        </div>
                        <div class="aui-info-item aui-font-size-12">{{ vo.create_time|time }}</div>
                    </div>
                </div>
                <div class="aui-list-item-media">
                    <img :src="vo.url">
                </div>
            </div>
        </li>

    </ul>
</div>
</body>
</body>
</html>
<script src="../script/api.js"></script>
<script src="../script/common.js"></script>
<script src="../script/vue.js"></script>
<script src="../script/swiper.min.js"></script>

<script>
    var slide = null;
    var vm = new Vue({
        el: '#app',
        data: {
            slider_list: [
            ],
            list: [],
        },
        methods: {
            init: function () {
                api.ajax({         //ajax异步执行，数据没有渲染完毕，代码继续执行
                    url: index_url,
                    method: 'post',
                    timeout: 30,
                    dataType: 'json',
                    returnAll: false,
                    data: {
                        values: {
                            name: 'values'
                        }
                    }
                }, function (ret, err) {
                    if (ret) {
                        console.log(JSON.stringify(ret));
                        vm.slider_list = ret.data.slider_list;
                        vm.list = ret.data.list;
                        setTimeout(function () {
                            slide = new Swiper('#slider', {
                                autoplay: 3000,
                                visibilityFullFit : true,
                                loop: true,
                                pagination: '.swiper-pagination',
                                paginationClickable: true,
                            });
                        },200);
                    } else {
                        console.log(JSON.stringify(err));
                    }
                });
            },
            open_content:function (index) {
                api.openWin({
                    name: 'content_win',
                    url: 'widget://html/content_win.html',
                    pageParam: {
                        id: vm.list[index].id,
                        title: vm.list[index].title
                    }
                });
            }
        }
    });
    apiready = function () {
        vm.init();
        /**
        api.setRefreshHeaderInfo({
            visible: true,
            loadingImg: 'widget://image/refresh.png',
            bgColor: '#ccc',
            textColor: '#fff',
            textDown: '下拉刷新...',
            textUp: '松开刷新...',
            showTime: true
        }, function (ret, err) {
            slide.destroy(false); //销毁slider对象
            vm.init();
            setTimeout("api.refreshHeaderLoadDone()", '500');
        });
         **/
    };

</script>
